<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars" :isLeft="true" color="#fff">
      <template #title><text style="color: #fff">结尾款</text></template>
    </GlobalTopBar>
    <!-- 内容 -->
    <view class="page_content">
      <!-- 列表内容 -->
      <scroll-view class="scroll-Y" scroll-y>
        <view class="libox">
          <!-- 中间服务内容 -->
          <view
            class="li_center flex"
            v-if="OrderInfo.service_order_goods_info?.thumbnail"
          >
            <image
              class="cen_img"
              :src="OrderInfo.service_order_goods_info?.thumbnail"
              mode="aspectFill"
            />
            <view class="cen_text_box">
              <view>{{ OrderInfo.service_order_goods_info?.goods_title }}</view>
              <view>￥{{ OrderInfo.service_order_goods_info?.buy_price }}</view>
            </view>
          </view>
          <!-- 顶部文字 -->
          <view class="libox_tops" style="margin-top: 20rpx">
            <text class="t1">订单编号：</text
            ><text class="t2">{{ OrderInfo.tid }}</text>
          </view>
          <view class="libox_tops">
            <text class="t1">服务地址：</text>
            <text class="t2">{{
              `${OrderInfo.service_order_address_info?.province_name}${OrderInfo.service_order_address_info?.city_name}${OrderInfo.service_order_address_info?.district_name}${OrderInfo.service_order_address_info?.address}`
            }}</text>
          </view>
          <view class="libox_tops ac2">
            <text class="t1">师傅信息：</text>
            <view class="t2 flex">
              <image
                class="head_img"
                :src="OrderInfo.worker_info?.headimg"
                mode="aspectFill"
              />
              <text
                >{{ OrderInfo.worker_info?.worker_name }}
                {{ OrderInfo.worker_info?.phone }}</text
              ></view
            >
          </view>
        </view>
        <view class="libox">
          <!-- 顶部文字 -->
          <view class="libox_tops">
            <text class="t1" style="font-weight: 600">费用明细</text>
          </view>
          <view class="libox_tops ac">
            <text class="t1">尾款金额</text>
            <text class="t1"
              >￥{{
                OrderInfo
                  .service_order_pending_payment_balance_payment_transaction_record
                  ?.balance_payment_amount
              }}</text
            >
          </view>
          <view class="libox_tops">
            <text class="t1">尾款图片：</text>
            <view
              class="t2"
              v-if="
                OrderInfo
                  .service_order_pending_payment_balance_payment_transaction_record
                  ?.balance_payment_img
              "
            >
              <image
                v-for="(
                  item, index
                ) in OrderInfo.service_order_pending_payment_balance_payment_transaction_record?.balance_payment_img.split(
                  ',',
                )"
                @click="
                  ylImgFun(
                    index,
                    OrderInfo.service_order_pending_payment_balance_payment_transaction_record?.balance_payment_img.split(
                      ',',
                    ),
                  )
                "
                class="wk_img"
                :src="item"
                mode="aspectFill"
              />
            </view>
          </view>
          <view class="libox_tops">
            <text class="t1">尾款备注：</text>
            <text class="t1">{{
              OrderInfo
                .service_order_pending_payment_balance_payment_transaction_record
                ?.balance_payment_remark
            }}</text>
          </view>
        </view>
        <view class="btnboxs flex_center">
          <button
            id="contactBtn"
            class="flex_center"
            open-type="contact"
            bindcontact="onContact"
          >
            <view class="lbtn">联系客服</view>
          </button>
          <picker
            @change="doSaveSettlementBalancePaymentServiceOrder"
            :range="[
              { title: '余额支付', value: 1 },
              { title: '在线支付', value: 2 },
            ]"
            range-key="title"
          >
            <view class="rbtn">结算尾款</view>
          </picker>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, watch, onBeforeMount } from 'vue';
import { useCounterStore } from '@/store';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { formatTimestamp } from '@/utils/validate';
import SearchInput from '@/components/SearchInput.vue';

const store = useCounterStore();
const indexs = ref(0);
const imgList = ref([]);

const ylImgFun = (index, list) => {
  uni.previewImage({
    current: index,
    urls: list,
  });
};

const OrderInfo = ref({});
// 获取服务订单详细数据
const getServiceOrderInfo = async (service_order_id = 4) => {
  OrderInfo.value = await request('wxapp/user/getServiceOrderInfo', {
    service_order_id,
  });
};

// 结算尾款
const doSaveSettlementBalancePaymentServiceOrder = async (e) => {
  const data = await request(
    'wxapp/user/doSaveSettlementBalancePaymentServiceOrder',
    {
      service_order_id: OrderInfo.value.id,
      pay_way: +e.detail.value + 1,
    },
  );
  if (
    OrderInfo.service_order_pending_payment_balance_payment_transaction_record
      ?.balance_payment_amount == 0 ||
    +e.detail.value + 1 === 1
  ) {
    uni.reLaunch({
      url: `/pages/my/paymentInquiry?tid=${data.tid}&index=3`,
    });
  } else {
    wx.requestPayment({
      timeStamp: data.wx_app_pay_param.timeStamp,
      nonceStr: data.wx_app_pay_param.nonceStr,
      package: data.wx_app_pay_param.package,
      signType: data.wx_app_pay_param.signType,
      paySign: data.wx_app_pay_param.paySign,
      success: function (res) {
        uni.reLaunch({
          url: `/pages/my/paymentInquiry?tid=${data.tid}&index=3`,
        });
      },
      fail: function (err) {
        uni.showToast({
          title: '支付失败',
          icon: 'none',
          mask: true,
        });
      },
    });
  }
};
onLoad((options) => {
  getServiceOrderInfo(options.id);
});
onBeforeMount(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.topbars {
  background: linear-gradient(to right, #3c9fff, #3184ff);
}
.topl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image {
    width: 750rpx;
    height: 364rpx;
  }
}
.page_content {
  box-sizing: border-box;
  padding: 20rpx;
  position: relative;
}
.scroll-Y {
  position: relative;
  height: 75vh;
  box-sizing: border-box;
  padding-bottom: 40rpx;
}
.tops {
  box-sizing: border-box;
  padding: 30rpx 20rpx;
  background: linear-gradient(to right, #3c9fff, #3184ff);
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  font-size: 24rpx;
  margin-bottom: 15rpx;
  view {
    position: relative;
    width: max-content;
    &.ac {
      color: #315bc0;
      &::after {
        content: ' ';
        position: absolute;
        width: 100%;
        height: 3rpx;
        bottom: 0;
        left: 50%;
        transform: translate(-50%);
        background-color: #315bc0;
      }
    }
  }
}
.scroll-Y {
  max-height: 80vh;
}
.libox {
  border-radius: 20rpx;
  border: 1rpx solid #437ef6;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  // font-size: 24rpx;
  .libox_tops {
    display: flex;
    margin-bottom: 15rpx;
    &.ac {
      justify-content: space-between;
    }
    &.ac2 {
      align-items: center;
    }
    .t1 {
      flex-shrink: 0;
    }
    .t2 {
      flex: 1;
    }
  }
  .li_center {
    .cen_img {
      width: 140rpx;
      height: 140rpx;
      border-radius: 10rpx;
      margin-right: 40rpx;
    }
    .cen_text_box {
      font-size: 30rpx;
      font-weight: 700;
      line-height: 40rpx;
    }
    .cen_sl {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      view {
        width: max-content;
      }
    }
  }
  .cen_je {
    font-size: 30rpx;
    color: #ff0000;
    justify-content: flex-end;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #a1cbff;
  }
  .jd_box {
    padding: 20rpx 0;
    border-bottom: 1rpx solid #a1cbff;
    .jd_text {
      position: relative;
      background-color: #3184ff;
      border-radius: 10rpx;
      color: #fff;
      line-height: 46rpx;
      padding: 0 10rpx;
      margin-right: 20rpx;
      &.ac {
        background-color: #ff5400;
        &::after {
          content: ' ';
          position: absolute;
          bottom: -16rpx;
          left: 50%;
          transform: translate(-50%);
          border-top: 10rpx solid #ff5400;
          border-right: 10rpx solid transparent;
          border-bottom: 10rpx solid transparent; /* 填充颜色 */
          border-left: 10rpx solid transparent;
        }
      }
    }
    .phone {
      margin-top: 20rpx;
      padding: 20rpx;
      border-radius: 20rpx;
      background-color: #eaf2fc;
      .head_img {
        width: 50rpx;
        height: 50rpx;
        border: 1rpx solid #047cff;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .phone_img {
        margin-left: auto;
        image {
          width: 47rpx;
          height: 46rpx;
        }
      }
    }
  }
  .bottom_time_fun {
    padding: 20rpx 0 10rpx;
    .time_icon {
      width: 28rpx;
      height: 29rpx;
      margin-right: 10rpx;
    }
    .time_text {
      color: #999;
    }
    .btn {
      margin-left: auto;
      line-height: 44rpx;
      border-radius: 22rpx;
      border: 1rpx solid #666666;
      padding: 0 20rpx;
      &.ac {
        margin-left: 10rpx;
      }
      &.a1 {
        background-color: #0084f1;
        border-color: #0180f1;
        color: #fff;
        margin-left: 10rpx;
      }
      &.a2 {
        background: linear-gradient(to bottom, #fe7f17, #fe4a15);
        border-color: transparent;
        color: #fff;
      }
    }
  }
}
#contactBtn {
  width: max-content;
  margin: 0;
}

.head_img {
  width: 50rpx;
  height: 50rpx;
  border: 1rpx solid #047cff;
  border-radius: 50%;
  margin-right: 20rpx;
}
.wk_img {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}
.btnboxs {
  view {
    flex-shrink: 0;
    width: max-content;
    line-height: 50rpx;
    width: 300rpx;
    border-radius: 25rpx;
    color: #fff;
    text-align: center;
  }
  .lbtn {
    background-color: #3998ff;
    margin-right: 20rpx;
  }
  .rbtn {
    background: linear-gradient(to bottom, #fe7f17, #fe4a15);
    background-color: #3998ff;
  }
}
</style>
